/**

 @Name：layui.element 常用元素操作
 @Author：贤心
 @License：MIT
    
 */

layui.define('jquery', function (exports) {
  "use strict";

  var $ = layui.$
    , hint = layui.hint()
    , device = layui.device()

    , MOD_NAME = 'element', THIS = 'layui-this', SHOW = 'layui-show'

    , Element = function () {
      this.config = {};
    };

  //全局设置
  Element.prototype.set = function (options) {
    var that = this;
    $.extend(true, that.config, options);
    return that;
  };

  //表单事件监听
  Element.prototype.on = function (events, callback) {
    return layui.onevent.call(this, MOD_NAME, events, callback);
  };

  //外部Tab新增
  Element.prototype.tabAdd = function (filter, options) {
    var TITLE = '.layui-tab-title'
      , tabElem = $('.layui-tab[lay-filter=' + filter + ']')
      , titElem = tabElem.children(TITLE)
      , barElem = titElem.children('.layui-tab-bar')
      , contElem = tabElem.children('.layui-tab-content')
      , li = '<li lay-id="' + (options.id || '') + '"'
        + (options.attr ? ' lay-attr="' + options.attr + '"' : '') + '>' + (options.title || 'unnaming') + '</li>';

    barElem[0] ? barElem.before(li) : titElem.append(li);
    contElem.append('<div class="layui-tab-item">' + (options.content || '') + '</div>');
    call.hideTabMore(true);
    call.tabAuto();
    return this;
  };

  //外部Tab删除
  Element.prototype.tabDelete = function (filter, layid) {
    var TITLE = '.layui-tab-title'
      , tabElem = $('.layui-tab[lay-filter=' + filter + ']')
      , titElem = tabElem.children(TITLE)
      , liElem = titElem.find('>li[lay-id="' + layid + '"]');
    call.tabDelete(null, liElem);
    return this;
  };

  //外部Tab切换
  Element.prototype.tabChange = function (filter, layid) {
    var TITLE = '.layui-tab-title'
      , tabElem = $('.layui-tab[lay-filter=' + filter + ']')
      , titElem = tabElem.children(TITLE)
      , liElem = titElem.find('>li[lay-id="' + layid + '"]');
    call.tabClick.call(liElem[0], null, null, liElem);
    return this;
  };

  //自定义Tab选项卡
  Element.prototype.tab = function (options) {
    options = options || {};
    dom.on('click', options.headerElem, function (e) {
      var index = $(this).index();
      call.tabClick.call(this, e, index, null, options);
    });
  };


  //动态改变进度条
  Element.prototype.progress = function (filter, percent) {
    var ELEM = 'layui-progress'
      , elem = $('.' + ELEM + '[lay-filter=' + filter + ']')
      , elemBar = elem.find('.' + ELEM + '-bar')
      , text = elemBar.find('.' + ELEM + '-text');
    elemBar.css('width', percent);
    text.text(percent);
    return this;
  };

  var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar'
    , NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_MORE = 'layui-nav-more'
    , NAV_ANIM = 'layui-anim layui-anim-upbit'

    //基础事件体
    , call = {
      //Tab点击
      tabClick: function (e, index, liElem, options) {
        options = options || {};
        var othis = liElem || $(this)
          , index = index || othis.parent().children('li').index(othis)
          , parents = options.headerElem ? othis.parent() : othis.parents('.layui-tab').eq(0)
          , item = options.bodyElem ? $(options.bodyElem) : parents.children('.layui-tab-content').children('.layui-tab-item')
          , elemA = othis.find('a')
          , filter = parents.attr('lay-filter');

        if (!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank')) {
          othis.addClass(THIS).siblings().removeClass(THIS);
          item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
        }

        layui.event.call(this, MOD_NAME, 'tab(' + filter + ')', {
          elem: parents
          , index: index
        });
      }

      //Tab删除
      , tabDelete: function (e, othis) {
        var li = othis || $(this).parent(), index = li.index()
          , parents = li.parents('.layui-tab').eq(0)
          , item = parents.children('.layui-tab-content').children('.layui-tab-item')
          , filter = parents.attr('lay-filter');

        if (li.hasClass(THIS)) {
          if (li.next()[0]) {
            call.tabClick.call(li.next()[0], null, index + 1);
          } else if (li.prev()[0]) {
            call.tabClick.call(li.prev()[0], null, index - 1);
          }
        }

        li.remove();
        item.eq(index).remove();
        setTimeout(function () {
          call.tabAuto();
        }, 50);

        layui.event.call(this, MOD_NAME, 'tabDelete(' + filter + ')', {
          elem: parents
          , index: index
        });
      }

      //Tab自适应
      , tabAuto: function () {
        var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar'
          , CLOSE = 'layui-tab-close', that = this;

        $('.layui-tab').each(function () {
          var othis = $(this)
            , title = othis.children('.layui-tab-title')
            , item = othis.children('.layui-tab-content').children('.layui-tab-item')
            , STOPE = 'lay-stope="tabmore"'
            , span = $('<span class="layui-unselect layui-tab-bar" ' + STOPE + '><i ' + STOPE + ' class="layui-icon">&#xe61a;</i></span>');

          if (that === window && device.ie != 8) {
            call.hideTabMore(true)
          }

          //允许关闭
          if (othis.attr('lay-allowClose')) {
            title.find('li').each(function () {
              var li = $(this);
              if (!li.find('.' + CLOSE)[0]) {
                var close = $('<i class="layui-icon layui-unselect ' + CLOSE + '">&#x1006;</i>');
                close.on('click', call.tabDelete);
                li.append(close);
              }
            });
          }

          if (typeof othis.attr('lay-unauto') === 'string') return;

          //响应式
          if (title.prop('scrollWidth') > title.outerWidth() + 1) {
            if (title.find('.' + BAR)[0]) return;
            title.append(span);
            othis.attr('overflow', '');
            span.on('click', function (e) {
              title[this.title ? 'removeClass' : 'addClass'](MORE);
              this.title = this.title ? '' : '收缩';
            });
          } else {
            title.find('.' + BAR).remove();
            othis.removeAttr('overflow');
          }
        });
      }
      //隐藏更多Tab
      , hideTabMore: function (e) {
        var tsbTitle = $('.layui-tab-title');
        if (e === true || $(e.target).attr('lay-stope') !== 'tabmore') {
          tsbTitle.removeClass('layui-tab-more');
          tsbTitle.find('.layui-tab-bar').attr('title', '');
        }
      }

      //点击一级菜单
      /*
      ,clickThis: function(){
        var othis = $(this), parents = othis.parents(NAV_ELEM)
        ,filter = parents.attr('lay-filter')
        ,elemA = othis.find('a')
        ,unselect = typeof othis.attr('lay-unselect') === 'string';
  
        if(othis.find('.'+NAV_CHILD)[0]) return;
        
        if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank') && !unselect){
          parents.find('.'+THIS).removeClass(THIS);
          othis.addClass(THIS);
        }
        
        layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
      }
      )
      */

      //点击菜单 - a标签触发
      , clickThis: function () {
        var othis = $(this)
          , parents = othis.parents(NAV_ELEM)
          , filter = parents.attr('lay-filter')
          , parent = othis.parent()
          , child = othis.siblings('.' + NAV_CHILD)
          , unselect = typeof parent.attr('lay-unselect') === 'string';

        if (!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect) {
          if (!child[0]) {
            parents.find('.' + THIS).removeClass(THIS);
            parent.addClass(THIS);
          }
        }

        //如果是垂直菜单
        if (parents.hasClass(NAV_TREE)) {
          child.removeClass(NAV_ANIM);

          //如果有子菜单，则展开
          if (child[0]) {
            parent[child.css('display') === 'none' ? 'addClass' : 'removeClass'](NAV_ITEM + 'ed');
            if (parents.attr('lay-shrink') === 'all') {
              parent.siblings().removeClass(NAV_ITEM + 'ed');
            }
          }
        }

        layui.event.call(this, MOD_NAME, 'nav(' + filter + ')', othis);
      }

      //点击子菜单选中
      /*
      ,clickChild: function(){
        var othis = $(this), parents = othis.parents(NAV_ELEM)
        ,filter = parents.attr('lay-filter');
        parents.find('.'+THIS).removeClass(THIS);
        othis.addClass(THIS);
        layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
      }
      */

      //折叠面板
      , collapse: function () {
        var othis = $(this), icon = othis.find('.layui-colla-icon')
          , elemCont = othis.siblings('.layui-colla-content')
          , parents = othis.parents('.layui-collapse').eq(0)
          , filter = parents.attr('lay-filter')
          , isNone = elemCont.css('display') === 'none';

        //是否手风琴
        if (typeof parents.attr('lay-accordion') === 'string') {
          var show = parents.children('.layui-colla-item').children('.' + SHOW);
          show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;');
          show.removeClass(SHOW);
        }

        elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
        icon.html(isNone ? '&#xe61a;' : '&#xe602;');

        layui.event.call(this, MOD_NAME, 'collapse(' + filter + ')', {
          title: othis
          , content: elemCont
          , show: isNone
        });
      }
    };

  //初始化元素操作
  Element.prototype.init = function (type, filter) {
    var that = this, elemFilter = function () {
      return filter ? ('[lay-filter="' + filter + '"]') : '';
    }(), items = {

      //Tab选项卡
      tab: function () {
        call.tabAuto.call({});
      }

      //导航菜单
      , nav: function () {
        var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, follow = function (bar, nav, index) {
          var othis = $(this), child = othis.find('.' + NAV_CHILD);

          if (nav.hasClass(NAV_TREE)) {
            bar.css({
              top: othis.position().top
              , height: othis.children('a').outerHeight()
              , opacity: 1
            });
          } else {
            child.addClass(NAV_ANIM);
            bar.css({
              left: othis.position().left + parseFloat(othis.css('marginLeft'))
              , top: othis.position().top + othis.height() - bar.height()
            });

            timer[index] = setTimeout(function () {
              bar.css({
                width: othis.width()
                , opacity: 1
              });
            }, device.ie && device.ie < 10 ? 0 : TIME);

            clearTimeout(timeEnd[index]);
            if (child.css('display') === 'block') {
              clearTimeout(timerMore[index]);
            }
            timerMore[index] = setTimeout(function () {
              child.addClass(SHOW)
              othis.find('.' + NAV_MORE).addClass(NAV_MORE + 'd');
            }, 300);
          }
        }

        $(NAV_ELEM + elemFilter).each(function (index) {
          var othis = $(this)
            , bar = $('<span class="' + NAV_BAR + '"></span>')
            , itemElem = othis.find('.' + NAV_ITEM);

          //Hover滑动效果
          if (!othis.find('.' + NAV_BAR)[0]) {
            othis.append(bar);
            itemElem.on('mouseenter', function () {
              follow.call(this, bar, othis, index);
            }).on('mouseleave', function () {
              if (!othis.hasClass(NAV_TREE)) {
                clearTimeout(timerMore[index]);
                timerMore[index] = setTimeout(function () {
                  othis.find('.' + NAV_CHILD).removeClass(SHOW);
                  othis.find('.' + NAV_MORE).removeClass(NAV_MORE + 'd');
                }, 300);
              }
            });
            othis.on('mouseleave', function () {
              clearTimeout(timer[index])
              timeEnd[index] = setTimeout(function () {
                if (othis.hasClass(NAV_TREE)) {
                  bar.css({
                    height: 0
                    , top: bar.position().top + bar.height() / 2
                    , opacity: 0
                  });
                } else {
                  bar.css({
                    width: 0
                    , left: bar.position().left + bar.width() / 2
                    , opacity: 0
                  });
                }
              }, TIME);
            });
          }

          //展开子菜单
          itemElem.find('a').each(function () {
            var thisA = $(this)
              , parent = thisA.parent()
              , child = thisA.siblings('.' + NAV_CHILD);

            //输出小箭头
            if (child[0] && !thisA.children('.' + NAV_MORE)[0]) {
              thisA.append('<span class="' + NAV_MORE + '"></span>');
            }

            thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单
          });
        });
      }

      //面包屑
      , breadcrumb: function () {
        var ELEM = '.layui-breadcrumb';

        $(ELEM + elemFilter).each(function () {
          var othis = $(this)
            , ATTE_SPR = 'lay-separator'
            , separator = othis.attr(ATTE_SPR) || '/'
            , aNode = othis.find('a');
          if (aNode.next('span[' + ATTE_SPR + ']')[0]) return;
          aNode.each(function (index) {
            if (index === aNode.length - 1) return;
            $(this).after('<span ' + ATTE_SPR + '>' + separator + '</span>');
          });
          othis.css('visibility', 'visible');
        });
      }

      //进度条
      , progress: function () {
        var ELEM = 'layui-progress';
        $('.' + ELEM + elemFilter).each(function () {
          var othis = $(this)
            , elemBar = othis.find('.layui-progress-bar')
            , percent = elemBar.attr('lay-percent');

          elemBar.css('width', function () {
            return /^.+\/.+$/.test(percent)
              ? (new Function('return ' + percent)() * 100) + '%'
              : percent;
          }());

          if (othis.attr('lay-showPercent')) {
            setTimeout(function () {
              elemBar.html('<span class="' + ELEM + '-text">' + percent + '</span>');
            }, 350);
          }
        });
      }

      //折叠面板
      , collapse: function () {
        var ELEM = 'layui-collapse';

        $('.' + ELEM + elemFilter).each(function () {
          var elemItem = $(this).find('.layui-colla-item')
          elemItem.each(function () {
            var othis = $(this)
              , elemTitle = othis.find('.layui-colla-title')
              , elemCont = othis.find('.layui-colla-content')
              , isNone = elemCont.css('display') === 'none';

            //初始状态
            elemTitle.find('.layui-colla-icon').remove();
            elemTitle.append('<i class="layui-icon layui-colla-icon">' + (isNone ? '&#xe602;' : '&#xe61a;') + '</i>');

            //点击标题
            elemTitle.off('click', call.collapse).on('click', call.collapse);
          });

        });
      }
    };

    return items[type] ? items[type]() : layui.each(items, function (index, item) {
      item();
    });
  };

  Element.prototype.render = Element.prototype.init;

  var element = new Element(), dom = $(document);
  element.render();

  var TITLE = '.layui-tab-title li';
  dom.on('click', TITLE, call.tabClick); //Tab切换
  dom.on('click', call.hideTabMore); //隐藏展开的Tab
  $(window).on('resize', call.tabAuto); //自适应

  exports(MOD_NAME, element);
});

